/**
 * @Author:周邱艳
 * @Date:2020/6/30
 * @Description:这是银行卡详情页
 */
import React,{Component} from "react";
import {NavBar,Icon,Card, WingBlank, WhiteSpace, List,Button} from "antd-mobile";
import axios from "axios";
import {URL} from "../../index";
import {getCookieId} from "../Login/Component_Login/GetCookie";
const Item = List.Item;
export default class BankCardDetail extends Component{
    constructor(props) {
        super(props);
        this.state={
            disabled: false,
            bankAccountList:[],//json表名
            isShow:false
        }
        this.loadData = this.loadData.bind(this)
        this.handleLeftClick = this.handleLeftClick.bind(this)
    }
//加载数据
    loadData(){
        //请求数据
        axios({
            method:"GET",
            url: URL + "/bankAccount/bankAccountInfo",
            params: {
                userId:getCookieId()
            }
        }).then(
            (res)=>{
                this.setState({
                    bankAccountList:this.state.bankAccountList.concat(res.data.bankAccountList)
                })
            }
        ).catch(function (error) {
            console.log(error);
        })
    }
    componentDidMount() {
        this.loadData()
    }
    handleLeftClick(event){
        localStorage.setItem('tabs',2);
        this.props.history.push('/terran/my')
    }
    render() {
        return (
            <div>
                <div style={{position:"fixed",width:"100%",zIndex:999}}>
                    {/*页面顶部*/}
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" style={{color:" #f8a83f"}} />}
                        onLeftClick={this.handleLeftClick}
                    >银行卡详情</NavBar>
                </div>
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <div>
                {(()=>{return this.state.bankAccountList.map((item,index)=>{
                    return (<WingBlank size="lg">
                        <Card
                            style={{borderRadius:10}}>
                            {/*卡片第一部分*/}
                            <Card.Header style={{backgroundColor:"#f8a83f",height:80,borderTopLeftRadius:10,borderTopRightRadius:10}}
                                         title={
                                             <div style={{color:"white",marginLeft:5}}>
                                                 <ul style={{fontSize:15,marginBottom:2}}>{item.accountBankName}</ul>{/*银行名*/}
                                                 <ul >{"**** **** **** " + item.bankAccountCard.substring(item.bankAccountCard.length-4)}</ul>{/*银行卡号*/}
                                                 <ul style={{fontSize:13,color:"rgba(106,106,106,0.77)",marginTop:1}}>{"余额："+item.bankAccountAmoount+"元"}</ul>{/*卡内金额*/}
                                             </div>
                                         }
                                         thumb={<img
                                             src={require('../../access/images/bankIcon.png')}
                                             style={{width:40,height:40,marginBottom:20}}
                                             alt=''
                                         />}
                            />

                            {/*卡片内容*/}
                            <Card.Body>
                                <div>
                                    <List className="my-list">
                                        <Item extra={item.bankAccountPhone}>预留手机号：</Item>{/*预留手机号*/}
                                    </List>
                                    <List className="my-list">
                                        <Item extra={item.bankHotline}>银行热线：</Item>
                                    </List>
                                </div>
                            </Card.Body>
                        </Card>
                        <WhiteSpace size="lg" />
                    </WingBlank>
                    )
                })
                })()}
                </div>
                <WhiteSpace size="lg" />
                {/*添加银行卡功能*/}
                <WingBlank size="lg">
                    <Button
                        icon={<img src={require('../../access/images/添加.png')} alt=''/>}
                        onClick={()=>{this.props.history.push("/addBankCard")}}
                        type="primary">
                        添加银行卡
                    </Button>
                </WingBlank>

                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
                <WhiteSpace size="lg" />
            </div>
        );
    }
}
